<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页实战1</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/index1.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--顶部图片-->
<div id="top">
	<a href="# "><img src="../../img/top_pic.png" alt=""></a>

</div>
<!--顶部图片结束-->
<!--顶部灰色区域-->
<div id="nav">
	<div class="contain">
		<!--左侧-->
		<div class="left">
			<span class="hi">你好,欢迎光临凡客诚品!</span>
			<span class="login_reg">[<a href="#">登录</a> <a href="#">免费注册</a>]</span>
			<a href="#" class="link">我的订单</a>
			<a href="#" class="link">收藏本站</a>

		</div>
		<!--左侧结束-->
		<!--右侧-->
		<div class="right">
			<!--<ul>-->
			<!--<li>我的凡客</li>-->
			<!--<li>网站导航</li>-->
			<!--<li>帮助中心</li>-->
			<!--<li>网站公告</li>-->

			<!--</ul>-->
			<div class="dropdown">
				<button id="vancl" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					我的凡客
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu" aria-labelledby="vancl">
					<li><a>我的订单</a></li>
					<li><a>我的收藏</a></li>
					<li><a>积分查询</a></li>
				</ul>
			</div>
			<div class="dropdown">
				<button id="web-site" type="button" class="btn dropdown-toggle" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false">
					网站导航
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu" aria-labelledby="web-site">
					<li><a>网站联盟</a></li>
					<li><a>礼品卡</a></li>
					<li><a>咨询中心</a></li>
				</ul>
			</div>

			<div class="dropdown">
				<button id="help-center" type="button" class="btn dropdown-toggle" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false">
					帮助中心
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu" aria-labelledby="help-center">
					<li><a>购物指南</a></li>
					<li><a>配送方式</a></li>
					<li><a>售后服务</a></li>
					<li><a>投诉建议</a></li>
					<li><a>在线客服</a></li>
				</ul>
			</div>

			<div class="dropdown">
				<button id="notice" type="button" class="btn dropdown-toggle" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false">
					网站公告
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu" aria-labelledby="notice">
					<li><a>配送公告</a></li>

				</ul>
			</div>
			<span class="txt"><a href="#">手机版</a></span>
			<a href="" class="mobile"></a>
			<span class="scan"><a href="#">扫一扫</a></span>
			<a href="" class="qr_code"></a>

		</div>
		<!--右侧结束-->
	</div>

</div>

<!--顶部灰色区域结束-->
<!--搜索区域-->
<div id="search_box">
	<a href="" class="logo"></a>

	<!--搜索框-->
	<form action="">
		<input type="text" class="key_word" value="原装进口全世界">
		<input type="submit" class="sub" value="搜 索">
	</form>

	<!--搜索框结束-->
	<!--搜索框下方列表-->
	<ul class="tab">
		<li><a href="" class="tab_0">t恤男</a></li>
		<li><a href="" class="tab_1">连衣裙</a></li>
		<li><a href="" class="tab_2">夏凉被</a></li>
		<li><a href="" class="tab_3">电动牙刷</a></li>
		<li><a href="" class="tab_4">麻将灯</a></li>
		<li><a href="" class="tab_5">防晒衣</a></li>
		<li><a href="" class="tab_6">凉鞋</a></li>
		<li><a href="" class="tab_7">双肩包</a></li>
		<li><a href="" class="tab_8">口红</a></li>
		<div style="clear: both"></div>
	</ul>
</div>
<!--搜索框下方列表结束-->

<!--搜索区域结束-->
<!--商品分类-->
<div id="nav_box">
	<div id="nav_center">
	<div id="classify">
		<span class="list"></span>
		<div class="text">商品分类</div>
	</div>
	<div id="classify_form">
		<a href="" class="shop_cart"><img src="../../img/shop_cart.png" alt=""></a>
		<a href="" class="tianmao"><img src="../../img/mimi.png" alt=""></a>

		<ul>
			<li><a href="">天猫会员</a></li>
			<li><a href="">品牌街</a></li>
			<li><a href="">电器城</a></li>
			<li><a href="">喵鲜生</a></li>
			<li><a href="">医药馆</a></li>
			<li><a href="">营业厅</a></li>
			<li><a href="">魅力惠</a></li>
			<li><a href="">飞猪旅行</a></li>
			<li><a href="">苏宁易购</a></li>
			<div style="clear: both"></div>
		</ul>

	</div>
</div>
</div>
<!--商品分类结束-->
<!--中间区域-->
<div id="main">
	<div class="main_center">

	<!--中间区域左侧-->
	<div class="main_left">
		<ul>

			<li><a href="">女装/内衣</a></li>
			<li><a href="">男装/户外运动</a></li>
			<li><a href="">女鞋/男鞋/箱包</a></li>
			<li><a href="">化妆品/个人护理</a></li>
			<li><a href="">腕表/珠宝饰品/眼镜</a></li>
			<li><a href="">手机/数码/电脑办公</a></li>
			<li><a href="">母婴玩具</a></li>
			<li><a href="">零食/进口食品/酒茶</a></li>
			<li><a href="">生鲜水果</a></li>
			<li><a href="">大家电/生活电器</a></li>
			<li><a href="">家具建材</a></li>
			<li><a href="">汽车/配件/用品</a></li>
			<li><a href="">家纺/家饰/鲜花</a></li>
			<li><a href="">医药保健</a></li>
			<li><a href="">厨具/收纳/宠物</a></li>
			<li><a href="">图书影像</a></li>

		</ul>

	</div>
	<!--中间区域左侧结束-->
	<!--中间区域右侧-->
	<!--<div class="main_right">-->
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
				<li data-target="#myCarousel" data-slide-to="4"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="../../img/pic_3.jpg" >
				</div>
				<div class="item">
					<img src="../../img/pic_1.jpg" >
				</div>
				<div class="item">
					<img src="../../img/pic_2.jpg" >
				</div>
				<div class="item">
					<img src="../../img/pic_4.jpg" >
				</div>
				<div class="item">
					<img src="../../img/pic_5.jpg" >
				</div>
			</div>
		</div>


	<!--</div>-->
	<!--中间区域右侧结束-->
	</div>
</div>


<!--中间区域结束-->
</body>
</html>